<template>
  <div>
    <ele-pro-table
      ref="tableRef"
      height="calc(100vh - 270px)"
      :needPage="false"
      :toolkit="[]"
      :row-key="(record) => record.id"
      :columns="columns"
      :datasource="list"
      :scroll="{ x: 'max-content' }"
    >
      <template #toolbar>
        <slot name="toolbar"></slot>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.name === 'sales_price'">
          <a-input
            placeholder="请输入"
            type="number"
            allow-clear
            v-model:value="record.sales_price"
          />
        </template>
        <template v-if="column.name === 'market_price'">
          <a-input
            placeholder="请输入"
            type="number"
            allow-clear
            v-model:value="record.market_price"
          />
        </template>
        <template v-if="column.name === 'performance_price'">
          <a-input
            placeholder="请输入"
            type="number"
            allow-clear
            v-model:value="record.performance_price"
          />
        </template>
      </template>
    </ele-pro-table>

    <div style="margin: 20px 0 0 0">
      <a-space>
        <a-button type="primary" @click="submit()">保存</a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, nextTick, defineExpose } from 'vue';
  import { Form, message } from 'ant-design-vue';
  import UserSearch from '@/components/zbTable/components/user-search.vue';
  import formatColumns from '@/utils/tableColumnsFormat';
  import { useRouter } from 'vue-router';
  import { actionFn } from '@/utils/action.js';
  import { price_setting } from '@/api/setting/tenant_price';
  const router = useRouter();
  const { push } = useRouter();
  const props = defineProps({
    apiFun: Function,
    type: String
  });
  const emit = defineEmits(['action']);
  // 表格实例
  const tableRef = ref(null);
  // 表格列配置
  let columns = ref([]);
  // 表格搜索动态表单
  let searchData = ref([]);
  // 表格选中数据
  const selection = ref([]);
  // 触发父级方法数组
  const emitsArr = ref([]);
  const list = ref([]);

  // 表格数据源
  const datasource = ({ page, limit, where }) => {
    return props.apiFun({
      page,
      limit,
      page_size: 9999,
      filters: {
        ...where
      }
    });
  };
  // 表头/搜索栏，数据
  props.apiFun().then(async (res) => {
    columns.value = await formatColumns(res.columns);
    searchData.value = res.searchData;
    list.value = res.list;
  });

  const submit = () => {
    console.log('&&&', list.value);
    let arr = [];
    list.value.forEach((item) => {
      arr.push({
        quality_code: item.quality_code,
        sales_price: item.sales_price,
        market_price: item.market_price,
        performance_price: item.performance_price
      });
    });
    price_setting({
      datas: arr
    })
      .then((res) => {
        message.success(res.msg);
        tableRef?.value?.reload();
      })
      .catch((e) => {
        message.error(e.message || e);
      });
  };
  /* 搜索 */
  const reload = (where) => {
    selection.value = undefined;
    tableRef?.value?.reload({
      page: 1,
      where
    });
  };

  // **重点！！这里需要使用defineExpose暴露出去**
  defineExpose({
    reload
  });
</script>

<script>
  export default {
    name: 'SystemUser'
  };
</script>

<style>
  .logo {
    width: 40px;
  }
</style>
